<template>
  <div>
    <el-card class="box-card" style="margin-bottom:10px;position:relative;">
      <el-button :disabled="isRefreshing" size="mini" class="btn-refresh" @click="actionRefresh">刷新</el-button>
      <el-breadcrumb separator="|">
        <el-breadcrumb-item>进程总数 : {{processes.length}}</el-breadcrumb-item>
        <el-breadcrumb-item>运行 : {{getStatCount('R')}}</el-breadcrumb-item>
        <el-breadcrumb-item>休眠 : {{getStatCount('S')}}</el-breadcrumb-item>
        <el-breadcrumb-item>僵尸 : {{getStatCount('Z')}}</el-breadcrumb-item>
        <el-breadcrumb-item>停止 : {{getStatCount('T')}}</el-breadcrumb-item>
        <el-breadcrumb-item>等待 : {{getStatCount('D')}}</el-breadcrumb-item>
        <el-breadcrumb-item>死掉 : {{getStatCount('X')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    
    <el-card class="box-card">
      <el-table :data="filteredProcesses">
        <el-table-column prop="user" label="用户" width="100" sortable></el-table-column>
        <el-table-column prop="pid" label="PID" width="100" sortable></el-table-column>
        <el-table-column prop="cpu" label="CPU" width="80" sortable></el-table-column>
        <el-table-column prop="mem" label="内存" width="80" sortable></el-table-column>
        <el-table-column prop="stat" label="状态" width="80" sortable></el-table-column>
        <el-table-column prop="start" label="启动时间" width="100" sortable></el-table-column>
        <el-table-column prop="command" label="启动命令" sortable></el-table-column>
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <el-input size="mini" placeholder="输入关键字搜索" v-model="searchText" :data-scope="scope.$index"/>
          </template>
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="actionKill(scope.row.pid)">结束</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import RegexMatch from '../../utils/RegexMatch.js'
export default {
    data() {
        return {
            searchText : null,
            processes : [],
            refreshTimer : null,
            isRefreshing : false,
        };
    },
    computed : {
        filteredProcesses() {
            if ( null == this.searchText || '' == this.searchText.trim() ) {
                return this.processes;
            }

            let processes = [];
            for ( let i=0; i<this.processes.length; i++ ) {
                if ( -1 != this.processes[i].command.indexOf(this.searchText) ) {
                    processes.push(this.processes[i]);
                }
            }
            return processes;
        },
    },
    async mounted () {
        await this.refresh();
    },
    destroyed() {
        if ( null != this.refreshTimer ) {
            clearTimeout(this.refreshTimer);
        }
    },
    methods : {
        /** 结束进程 */
        async actionKill( pid ) {
            try {
                await this.$confirm(`此操作将结束该进程, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                });
            } catch {
                return;
            }

            let server = this.$store.getters.serverCurrent;
            let client = await server.getSshClient();
            let kill = await client.exec(`kill -9 ${pid}`);
            kill = kill.trim();
            if ( '' != kill ) {
                this.$message.error(`结束进程失败：${kill}`);
            } else {
                this.refresh();
            }
        },
        /** 刷新进程列表 */
        async actionRefresh() {
            await this.refresh();
        },
        /** 刷新进程列表 */
        async refresh() {
            this.isRefreshing = true;
            let server = this.$store.getters.serverCurrent;
            let client = await server.getSshClient();
            let ps = await client.exec('ps -auxwww');
            ps = ps.trim().split('\r\n');
            ps.shift();
            
            this.processes = [];
            for ( let i=0; i<ps.length; i++ ) {
                let process = RegexMatch.match('ps-aux', ps[i]);
                process.pid = process.pid * 1;
                process.cpu = process.cpu * 1;
                process.mem = process.mem * 1;
                this.processes.push(process);
            }
            this.isRefreshing = false;
        },
        /** 统计进程状态数量 */
        getStatCount( stat ) {
            let count = 0;
            for ( let i=0; i<this.processes.length; i++ ) {
                if ( -1 != this.processes[i].stat.indexOf(stat) ) {
                    count ++
                }
            }
            return count;
        }
    },
}
</script>
<style scoped>
.btn-refresh {position: absolute;right: 13px;bottom: 13px;}
</style>